<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />

    <title>Three框架</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>

    <style type="text/css">
      html,
      body {
        margin: 0;

        height: 100%;
      }

      div#canvas-frame {
        border: none;

        cursor: pointer;

        width: 100%;

        height: 100%;

        background-color: #eeeeee;
      }

      canvas {
        display: block;
      }
    </style>

    <script>
      //渲染器

      var renderer, width, height;

      function initRender() {
        width = document.getElementById("canvas-frame").clientWidth;

        height = document.getElementById("canvas-frame").clientHeight;

        renderer = new THREE.WebGLRenderer({
          antialias: true,
        });

        renderer.setSize(width, height);

        document
          .getElementById("canvas-frame")
          .appendChild(renderer.domElement);

        renderer.setClearColor(0xffffff, 1.0);
      }

      //相机

      var camera;

      function initCamera() {
        camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);

        camera.position.x = 0;

        camera.position.y = 900;

        camera.position.z = 0;

        camera.lookAt(new THREE.Vector3(0, 0, 0));
      }

      //场景

      var scene;

      function initScene() {
        scene = new THREE.Scene();
      }

      //光源

      var light;

      function initLight() {
        light = new THREE.DirectionalLight(0xff0000, 1.0, 0);

        light.position.set(100, 100, 200);

        scene.add(light);
      }

      //模型

      function initModel() {
        //轴辅助 （每一个轴的长度）
        // var object = new THREE.AxesHelper(500);
        // scene.add(object);

        var geometry = new THREE.BufferGeometry();

        geometry.setFromPoints([
          new THREE.Vector3(-500, 0, 0),
          new THREE.Vector3(500, 0, 0),
        ]);

        for (var i = 0; i <= 20; i++) {
          var line = new THREE.Line(
            geometry,
            new THREE.LineBasicMaterial({ color: randomColor(), opacity: 1 })
          );

          line.position.z = i * 50 - 500;

          scene.add(line);

          var line = new THREE.Line(
            geometry,
            new THREE.LineBasicMaterial({ color: randomColor(), opacity: 1 })
          );

          line.position.x = i * 50 - 500;

          line.rotation.y = (90 * Math.PI) / 180;

          scene.add(line);
        }

        console.log(scene);
      }

      //绘制

      function draw() {
        initRender();

        initCamera();

        initScene();

        initLight();

        initModel();

        renderer.render(scene, camera);
      }

      //生成随机颜色

      function randomColor() {
        var arrHex = [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "a",
            "b",
            "c",
            "d",
            "e",
            "f",
          ],
          strHex = "0x",
          index;

        for (var i = 0; i < 6; i++) {
          index = Math.round(Math.random() * 15);

          strHex += arrHex[index];
        }

        return eval(strHex);
      }
    </script>
  </head>

  <body onload="draw();">
    <div id="canvas-frame"></div>
  </body>
</html>
